

<template>
    <div class="storeInfo supplier">
        <div class="head">
            <p class="headTxt">门店卡充值档位设置</p>
            <el-form :model="form" class="headForm">
                
                <el-button type="danger" @click="theClick('add')">添加</el-button>


            </el-form>
            
        </div>
        <!-- <p style="line-height:30px;padding-left:20px;margin-top:8px;color:#333" v-if="form.order_id == ''">最近{{total}}笔人工退款订单记录</p> -->
        <!-- table -->
        <div class="tabContainer_SI tabContainer">
            <el-table :data="tableData" stripe style="width: 100%;text-align:center" >
                <!-- 序号	档位	赠送金额	商品(优惠券)	档位说明	更新时间	操作				 -->
                <el-table-column prop="gear_id" label="序号" fixed ></el-table-column>
                <el-table-column prop="price" label="档位"> </el-table-column>
                <el-table-column prop="largess_price" label="赠送金额" ></el-table-column>
                <el-table-column prop="price" label="商品(优惠券)" >
                    <template slot-scope="scope">
                        <div v-if="scope.row.largess_price != '0.00'">--</div>
                        <div v-else-if="scope.row.largess_product != ''">
                            <p v-for="(item,i) in scope.row.largess_product" :key="i">{{item.product_name}}</p>
                        </div>
                        <div v-else-if="scope.row.coupon_batch != '' || scope.row.coupon_batch[0].name != ''">
                            <p v-for="(item,i) in scope.row.coupon_batch" :key="i">{{item.name}}</p>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="desc" label="档位说明" ></el-table-column>
                <el-table-column prop="update_time" label="更新时间"></el-table-column>
                <el-table-column prop="" label="操作" v-if="limitList.length != 0">
                    <template slot-scope="scope">
                        <span v-for="(item,indexLimit) in limitList" :key="indexLimit" class="lightFont" @click="theClick(item.url,scope.row)">
                            <i>{{item.name}}</i>
                            <i v-if="indexLimit != limitList.length-1">&nbsp;|&nbsp;</i>
                        </span>
                    </template>          
                </el-table-column>
                <el-table-column v-else label="操作">/</el-table-column>

            </el-table>                       
        </div>
        <!-- 分页部分 -->
        <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            @current-change="changePage"
            :page-size="size"
            :current-page.sync="pageNum"
            :hide-on-single-page=true
            :total="total">{{total}}
        </el-pagination>
        <el-dialog :title="editTitle" :visible.sync="add_edit_show" class="business">
            <el-form ref="form" :model="editForm" label-width="80px">
                <el-form-item label="档位金额">
                    <el-input v-model="editForm.price"></el-input>
                </el-form-item>
                <el-form-item label="赠送">
                    <div style="display:flex">
                        <el-select v-model="editForm.val" style="width:130px;display:flex" @change="getVal">
                            <el-option v-for="item in zengtypeList" :key="item.status" :label="item.name" :value="item.status"></el-option>
                        </el-select>  
                        <div v-if="editForm.val == 0" class="iteminer">
                            <el-input placeholder="输入金额" class="inputone" v-model="editForm.largess_price"></el-input>
                        </div>
                        <div v-if="editForm.val == 1" class="iteminer">
                            <searchItem :input_url="surl" :default_txt="editForm.largess_product[0].product_name" class="inputone" v-on:getsearchItemGood="getgooditem"></searchItem>
                            <el-input placeholder="数量" v-model="editForm.largess_product[0].number" class="inputtwo"></el-input>                        
                        </div>
                        <div v-if="editForm.val == 2" class="iteminer">
                            <searchItem :input_url="surl2" :default_txt="editForm.coupon_batch[0].name" class="inputone" v-on:getsearchItemGood="getgooditem2"></searchItem>
                            <el-input placeholder="数量" class="inputtwo" v-model="editForm.coupon_batch[0].number"></el-input>
                        </div>     
                    </div>
                   
                </el-form-item>
     
                <el-form-item label="档位说明">                    
                     <el-input v-model="editForm.desc" type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="add_edit_show = false">取 消</el-button>
                <el-button type="primary" @click="confrim">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<style lang="scss">
.supplier{
        .el-dialog{
            .el-dialog__body{
                min-height: 300px;

            }
        } 
    }
  .tabContainer_SI{
      .el-table{
          .cell{
              text-align: center;
          }
      }
  }
</style>
<style lang="scss" scoped>
.needBore{
    .zengInfo{
        font-size:14px;
        color:rgba(0,0,0,0.5)
    }
}
// .combination{
    .iteminer{
        display:flex;
        .inputone{
            width:220px;
            margin-left:5px  ;
            margin-right:5px ; 
        }
        .inputtwo{
            width:60px;
            margin-right:5px;
        }
        .theclose{
            color:red;
            font-size:20px;
            line-height: 40px;    
        }
    }


</style>
<script>
import Vue from 'vue';
import { abc } from "../../../../js/abc.js";
import {potUrl} from '../../../../js/config_url.js'; 
import searchItem from "../../pop/goodslist.vue"
export default {
    components:{searchItem,},
    data () {
    return {
        tableData:[],
        total:50,
        size:20,
        form:{size:20,
            page:1
        },
        pageNum:1,
        limitList:[
            {name:"编辑",url:"edit"},
            {name:"删除",url:"del"},
        ],
        editTitle:"",
        add_edit_show:false,
        editForm:{
            price:"",
            desc:"",
            largess_price:"",
            largess_product:[{product_name:"",number:"",product_id:""}],
            coupon_batch:[{name:"",number:"",batch_id:""}]
        },
        zengtypeList:[
            {status:'',name:'赠送类型'},
            {status:'0',name:'赠钱'},
            {status:'1',name:'赠商品'},            
            {status:'2',name:'优惠券'}
        ],
        surl:potUrl.itemSearch,//模糊搜索商品接口
        surl2:potUrl.couponsearch,//模糊搜索优惠券接口


    }
  }, 
   mounted(){
      let that = this;
      that.getList();
      
  },
  methods:{
    search(){
        let that = this;
        //搜索有问题，搜索2019-03数据和2019-04数据是一样的；-error
        that.getList()
    },
    changePage(val){
        var that = this;
        that.pageNum = val;
        that.form.page = val;
        that.getList()
    },
    getList(){
        let that = this;
        abc.get(that,potUrl.storeviplist,that.form,(res)=>{
            that.tableData=res.data;
            that.total = res.data.length;
        })//列表
    },
    confrim(a){
        const that = this;
        let url = '';
        that.add_edit_show = false;
        let params = that.editForm
        console.log(that.editForm)
        if(that.editTitle == '添加'){
            url = potUrl.storevipadd
        }else{
            url = potUrl.storevipedit
        }
        if(that.editForm.largess_product[0].product_name == ''){
            params.largess_product = ''
        }else{
           params.largess_product = JSON.stringify(that.editForm.largess_product) 
        }
        if(that.editForm.coupon_batch[0].name == ''){
            params.coupon_batch = ''
        }else{
           params.coupon_batch = JSON.stringify(that.editForm.coupon_batch)
        }
        

        
        
        abc.post(that,url,params,(res)=>{
            that.getList()
        })
    },
    theClick(a,b){
        const that = this;
        if(a == 'del'){
            abc.twoTips(that,potUrl.storevipdel,'确定删除'+b.price+'得档位吗？',{gear_id:b.gear_id},()=>{
                that.getList()
            })
        }else{
            that.add_edit_show = true;
            if(a == 'edit'){
                that.editTitle = "编辑充值档位";
                that.editForm.gear_id = b.gear_id
                abc.get(that,potUrl.storevipinfo,{gear_id:b.gear_id},(res)=>{
                    that.editForm.price = res.data.price;
                    that.editForm.largess_price = res.data.largess_price;
                    that.editForm.desc = res.data.desc;
                    if(res.data.largess_price != '0.00'){
                        that.editForm.val = '0';
                    }else if(res.data.largess_product != ''){
                        that.editForm.val = '1';  
                        that.editForm.largess_product[0].product_name = res.data.largess_product[0].product_name;
                        // console.log(that.editForm.largess_product[0].product_name,":12121212")
                        that.editForm.largess_product[0].number = res.data.largess_product[0].number
                        that.editForm.largess_product[0].product_id = res.data.largess_product[0].product_id
                    }else if(res.data.coupon_batch != ''){
                        that.editForm.val = '2';
                        that.editForm.coupon_batch[0].name = res.data.coupon_batch[0].name
                        that.editForm.coupon_batch[0].number = res.data.coupon_batch[0].number
                        that.editForm.coupon_batch[0].batch_id = res.data.coupon_batch[0].batch_id
                    }
                })
            }else{
                that.editTitle = '添加';
            }
        }
    },
    getVal(){
        //select框改变时
        const that = this;
        if(that.editForm.val == '0'){
            that.editForm.largess_price = '';
        }else if(that.editForm.val == '1'){
            that.editForm.largess_product[0].product_name = ''
            that.editForm.largess_product[0].number = ''
        }else{
            that.editForm.coupon_batch[0].name = ''
            that.editForm.coupon_batch[0].number = ''
        }
        that.$forceUpdate() 
    },
    getgooditem(data){
        //s商品搜索
        const that = this;
        that.editForm.largess_product[0].product_name = data.product_name
        that.editForm.largess_product[0].product_id = data.product_id
        that.editForm.largess_product[0].unit = data.unit
    },
    getgooditem2(data){
        //优惠券搜索
        const that = this;
        that.editForm.coupon_batch[0].product_name = data.name
        that.editForm.coupon_batch[0].product_id = data.batch_id
    }
  }
}
</script>
